<template>
    <div class="box-column container-grid">
        <div class="box-row box-center-start info-el" style="display:flex;justify-content: space-between;">
            <div>持有人：{{ infoData.member_xm }}&emsp;&emsp;&emsp;手机号：{{ infoData.phone }}&emsp;&emsp;&emsp;用户类别：{{
                infoData.member_type == 1 ? '住户' : '员工' }}&emsp;&emsp;&emsp;失效时间：{{ infoData.door_end_time }}</div>
            <div>
                <el-button icon="el-icon-back" class="btn-blue" @click="go(infoData.from ==1 ? 'parkTenantTable' : ( infoData.from ==2 ?'equipmentCardTable' : 'parkGuestTable'))">
                    返回
                </el-button>
            </div>
        </div>
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData, infoData, dataStore }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <dialogForm ref="dialogForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogForm>
        <renewForm ref="renewForm" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></renewForm>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import { mixinTableStore } from '@/mixin/table/Store';
import { mixinTableHeader } from '@/mixin/table/Header';
import { mixinTableOperation } from '@/mixin/table/Operation';
import { mixinDialogFormParent } from '@/mixin/dialog/FormParent';
import { mixinTabPage } from '@/mixin/tab/Page';
import { mixinAccess } from '@/mixin/Access';
import dialogForm from './Edit.vue';
import renewForm from './Renew.vue';
@Component({
    name: 'scripAuthDoorTable',
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinTabPage,
        mixinAccess
    ],
    components: {
        dialogForm, renewForm
    }
})
export default class scripAuthDoorTable extends Vue {
    @Action('equipmentCard/scripAuthDoorList') getList: any;
    @Action('equipmentCard/scripAuthDoorDelete') itemDel: any;
    infoData: any = {};
    editInit({ data }) {
        const me = this as any;
        me.infoData = data;
        me.lodaByDefaultParams({ scrip_sn: data.scrip_sn });
    }
    dataStore: any = {
        proxy: {
            autoLoad: false
        }
    };

    table: any = {
        btns: [
            {
                label: '删除',
                handleClick: (this as any).onDelClick
            },
            {
                condition: [
                    function ({ row }) {
                        return row.status == 1;
                    }
                ],
                enabledCondition: [
                    function ({ row }) {
                        return row.door_status == 1;
                    }],
                label: '重发',
                handleClick: this.onReSendClick
            }
        ],
        // 列配置
        columns: [
            {
                fixed: 'left',
                width: 70,
                type: 'seq',
                title: '序号'
            },
            {
                fixed: 'left',
                width: 180,
                title: '门禁名称',
                field: 'door_name'
            },
            {
                width: 200,
                title: '门禁guid',
                field: 'door_guid'
            },
            {
                width: 120,
                title: '能否考勤',
                field: 'is_kq',
                formatter: function ({ cellValue }) {
                    return ['', '能', '否'][cellValue];
                }
            },
            {
                width: 120,
                title: '在线状态',
                field: 'door_status',
                formatter: function ({ cellValue }) {
                    return ['', '在线', '离线'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.door_status];
                }
            },
            {
                width: 120,
                title: '下发状态',
                field: 'scrip_down',
                formatter: function ({ cellValue }) {
                    return ['', '下发成功', '等待下发', '下发失败'][cellValue];
                },
                className: function ({ row }) {
                    return ['', 'green', '', 'red'][row.scrip_down];
                }
            },
            {
                width: 150,
                title: '下发时间',
                field: 'down_at',
                formatter: function ({ row }) {
                    return row.scrip_down == 2 ? '' : row.down_at;
                }
            },
            {
                title: '备注',
                field: 'remark',
                formatter: function ({ row }) {
                    return row.scrip_down == 2 ? '' : row.remark;
                }
            },
            {
                showOverflow: 'ellipsis',
                fixed: 'right',
                slots: { default: 'operate' },
                title: '操作',
                width: 160
            }
        ]
    };
    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                field: 'door_name',
                label: '门禁名称'
            },
            {
                field: 'door_guid',
                label: '门禁guid'
            }
        ],
        btns: [
            {
                label: '追加',
                class: 'btn-blue',
              //  condition: ['permissionsData.authAdd'],
                icon: 'el-icon-plus',
                handleClick: (this as any).onAddInitClick
            },
            {
                label: '续期',
                class: 'btn-blue',
                condition: [,
                    function ({ dataStore }) {
                        return dataStore.pagination.total > 0;
                    }
                ],
                icon: 'el-icon-refresh',
                handleClick: (this as any).onAddRenewClick
            },
            {
                label: '注销',
                class: 'btn-blue',
                condition: [,
                    function ({ dataStore }) {
                        return dataStore.pagination.total > 0;
                    }
                ],
                icon: 'el-icon-close',
                handleClick: (this as any).onLogOffClick
            }
        ]
    };
    onAddInitClick() {
        const me = this as any;
        me.setDialogValue('selectItem', me.infoData);
        me.onAddClick();
    }

    @Action('parkTenantCard/status') confirmAction: any;
    // 重发
    onReSendClick({ row }: any) {
        const me = this as any;
        me.confirmMsg({ scrip_port_sn: row.scrip_port_sn, status: 0 }, '重新下发');
    }
    onAddRenewClick() {
        const me = this as any;
        me.showWin(true, me.infoData, 'renewForm');
    }
    // 注销
    @Action('parkTenantCard/del') confirmAction2: any;
    onLogOffClick() {
        const me = this as any;
        const url = me.infoData.from == 1 ? 'parkTenantTable' : ( me.infoData.from ==2 ? 'equipmentCardTable' : 'parkGuestTable');
        me.confirmMsg({ scrip_sn: me.infoData.member_sn }, '注销该住户的门禁授权', '门禁授权注销提示', 2, url);
    }
}
</script>
